<template>
  <div class="content">
        <ul class="flex-box">
        <li><span>新姓名：</span></li>
        <li><input maxlength="30" v-model="name" type="text" placeholder="请输入新的姓名"></li>
        <li><img v-if="isShow" @click="empty()" class="more-icon" src="~assets/img/icon_de@2x.png" alt=""></li>
      </ul>
    <div class="tc"><button ref="btn" @click="next()" class="common-btn">确认修改</button></div>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui'
export default {
  data () {
    return {
      isShow: false,
      name: '',
      isLogin: 'false',
      reg: /[\u4e00-\u9fa5]/
    }
  },
  methods: {
    next () {
      if (this.name.length > 0 && this.isLogin === true) { 
        if (this.reg.test(this.name) === true ) {
        this.$apiPost(`changename`, {'name': this.name}
            ).then((data) => {
              if (data.status === 0) {
                MessageBox.alert('修改姓名成功', '提示').then(() => {
                  this.$router.push('/basic_info')
                })
              } else {
                MessageBox.alert('操作超时，请重新操作', '提示').then(() => {
                  // this.$router.push('/basic_info')
                })
              }
            })
          } else {
            MessageBox.alert('姓名格式不正确，请重新输入', '提示').then(() => {
              // this.$router.push('/basic_info')
            })
          }
      }
    },
    empty () {
      this.name = ''
    }
  },
  watch: {
    name (newM, oldM) {
      if (newM.length > 0) {
        this.isShow = true
        this.isLogin = true
        this.$refs.btn.style.opacity = '1'
      } else {
        this.isShow = false
        this.isLogin = false
        this.$refs.btn.style.opacity = '0.5'
      }
    }
  }
}
</script>
<style scoped lang='scss'>

</style>
